<template>
  <div class="context">
    <div class="cont">
      <div class="cont-left">
        <!-- 热门推荐区域 -->
        <div class="contremen">
          <div class="el-icon-milk-tea"></div>
          <a href="#" class="remen">热 门 推 荐</a>
          <ul>
            <a href="#"><li>华语</li></a>
            <span>|</span>
            <a href="#"><li>流行</li></a>
            <span>|</span>
            <a href="#"><li>摇滚</li></a>
            <span>|</span>
            <a href="#"><li>电子</li></a>
            <span>|</span>
            <a href="#"><li>嘻哈</li></a>
          </ul>
          <a href="">
            <span class="more">更多</span>
          </a>
          <div class="el-icon-s-promotion"></div>
          <hr />
          <Music />
        </div>
        <!-- 新碟上架区域 -->
        <div class="contxindie">
          <div class="newmusic">
            <div class="el-icon-headset"></div>
            <a href="#" class="remen">新 碟 上 架</a>
            <a href="">
              <span class="more2">更多</span>
            </a>
            <div class="el-icon-s-promotion el2"></div>
          </div>
          <hr />
          <Music2 />
        </div>
        <!-- 热门MV -->
        <div class="mvcontent">
          <div class="el-icon-video-camera"></div>
          <a href="#" class="remen">热 门 M V</a>
          <a href="">
            <span>更多</span>
          </a>
          <div class="el-icon-s-promotion"></div>
          <hr />
          <Mv />
        </div>
      </div>

      <div class="cont-right">
        <!-- 登录区域 -->
        <div class="cont-r">
          <span>
            &nbsp; &nbsp;
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</span
          >
          <img class="img1" src="../assets/huanqing.png" />
          <el-button class="redbtn" type="primary" plain @click="dl"
            >用户登录</el-button
          >
          <img class="img2" src="../assets/huanqing.png" />
        </div>
        <!-- 歌手入住 -->
        <Singer />
      </div>
    </div>
  </div>
</template>

<script>
import Music from "./Music.vue";
import Music2 from "./Music2.vue";
import Singer from "./Singer.vue";
import Mv from "./Mv.vue";
export default {
  name: "Context",
  data() {
    return {
      info: [
        { name: "华语" },
        { name: "流行" },
        { name: "摇滚" },
        { name: "电子" },
        { name: "嘻哈" },
      ],
    };
  },
  components: { Music, Music2, Singer, Mv },
  methods: {
    dl() {
      this.$bus.$emit("denglu", true);
    },
  },
};
</script>

<style scoped>
.cont-r .el-button {
  width: 139px;
  height: 34px;
  line-height: 10px;
  color: white;
  background-color: #d80000cf;
  border: none;
  border-radius: 10px;
  margin-top: 2px;
  /* width: 139px;
  height: 31px;
  line-height: 2px;
  border-radius: 14px;
  border: 1px solid #f5f5f5;
  background-color: #fff;
  color: red;
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%); */
}
.cont-r .el-button:hover {
  background-color: #f30d0d;
  color: rgb(255, 255, 255);
  transition: all 0.5s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.context {
  z-index: 3;
  background-color: #fff;
  /* height: 700px; */
  background-color: #f5f5f5;
}
.cont {
  width: 982px;
  padding: 0 auto;

  z-index: 4;
  margin: 0 auto;
}
.cont-left {
  position: relative;
  width: 728px;
  /* height: 1186px; */
  background-color: #fff;
  border: 1px solid #ccc;
  margin-top: -1px;
  padding: 20px;
  border-bottom: none;
}
.remen {
  color: #333333;
  font-size: 22px;
}
.el-icon-milk-tea,
.el-icon-headset,
.el-icon-video-camera {
  font-size: 21px;
  margin-right: 10px;
  color: #c10d0c;
}
hr {
  border: 1px solid #c10d0c;
}
ul {
  position: absolute;
  top: 27px;
  left: 182px;
}
ul a {
  display: inline-block;
  width: 26px;
  font-size: 13px;
  color: #666;
}
ul span {
  color: #666;
  font-size: 7px;
  margin: 0 14px;
}
ul a:hover {
  text-decoration: underline;
}
.more {
  color: #666;
  position: absolute;
  top: 29px;
  right: 62px;
}
.more:hover {
  text-decoration: underline;
}
.contremen .el-icon-s-promotion {
  position: absolute;
  top: 27px;
  right: 32px;
  font-size: 18px;
  color: #c85c3f;
}

.contxindie {
  position: relative;
}
.more2 {
  position: absolute;
  top: 8px;
  right: 43px;
  color: #666;
}
.more2:hover {
  text-decoration: underline;
}
.el-icon-s-promotion {
  position: absolute;
  top: 6px;
  right: 11px;
  font-size: 18px;
  color: #c85c3f;
}

.cont-right {
  width: 255px;
  height: 125px;
  background-color: #fbfbfb;
  position: absolute;
  top: 394px;
  right: 228px;
  border: 1px solid #d3d3d3;
}

.cont-r {
  padding: 20px 10px;
}
.cont-r span {
  color: #adadad;
}
.el-button {
  position: absolute;
  top: 78px;
  right: 57px;
  width: 105px;
  height: 42px;
  color: #efedeb;
  background: #e42b37;
  border-color: #151514;
}
.img1 {
  position: absolute;
  top: -5px;
  right: 0px;
}
.img2 {
  position: absolute;
  top: -5px;
  left: 0px;
}

.mvcontent {
  position: relative;
}
.mvcontent .el-icon-s-promotion {
  position: absolute;
  top: 5px;
  right: 10px;
}
.mvcontent span {
  position: absolute;
  top: 8px;
  right: 43px;
  color: #666;
}
.mvcontent span:hover {
  text-decoration: underline;
}
</style>
